<template>
  <div class="invoice-detail-container">
    <el-card class="detail-card">
      <template #header>
        <div class="card-header">
          <span>销项发票详情</span>
          <div class="header-actions">
            <el-button @click="handleBack">返回</el-button>
            <el-button type="primary" @click="handleEdit">编辑</el-button>
            <el-button type="danger" @click="handleDelete">删除</el-button>
          </div>
        </div>
      </template>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="发票号码">{{ invoiceData.invoiceNumber }}</el-descriptions-item>
        <el-descriptions-item label="发票代码">{{ invoiceData.invoiceCode }}</el-descriptions-item>
        <el-descriptions-item label="发票类型">{{ getInvoiceTypeText(invoiceData.invoiceTypeCode) }}</el-descriptions-item>
        <el-descriptions-item label="是否红字发票">{{ invoiceData.isRedInvoice === 'Y' ? '是' : '否' }}</el-descriptions-item>
        <el-descriptions-item label="开票日期">{{ invoiceData.invoiceDate }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusType(invoiceData.status)">
            {{ getStatusText(invoiceData.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="销方识别号">{{ invoiceData.sellerTaxNumber }}</el-descriptions-item>
        <el-descriptions-item label="销方名称">{{ invoiceData.sellerName }}</el-descriptions-item>
        <el-descriptions-item label="购方识别号">{{ invoiceData.buyerTaxNumber }}</el-descriptions-item>
        <el-descriptions-item label="购方名称">{{ invoiceData.buyerName }}</el-descriptions-item>
        <el-descriptions-item label="金额">¥{{ formatAmount(invoiceData.totalAmount) }}</el-descriptions-item>
        <el-descriptions-item label="税额">¥{{ formatAmount(invoiceData.taxAmount) }}</el-descriptions-item>
        <el-descriptions-item label="价税合计">¥{{ formatAmount(invoiceData.totalTaxAmount) }}</el-descriptions-item>
        <el-descriptions-item label="发票来源">{{ invoiceData.invoiceSource }}</el-descriptions-item>
        <el-descriptions-item label="开票人">{{ invoiceData.issuer }}</el-descriptions-item>
        <el-descriptions-item label="税务机关代码">{{ invoiceData.taxBureauCode }}</el-descriptions-item>
        <el-descriptions-item label="税务机关名称">{{ invoiceData.taxBureauName }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ invoiceData.remark }}</el-descriptions-item>
      </el-descriptions>
      
      <!-- 附件列表 -->
      <el-card class="attachments-card" v-if="attachments.length > 0">
        <template #header>
          <span>附件</span>
        </template>
        <el-table :data="attachments" border>
          <el-table-column prop="name" label="附件名称" />
          <el-table-column prop="size" label="大小" />
          <el-table-column prop="uploadTime" label="上传时间" />
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button link type="primary" @click="handleDownload(row)">下载</el-button>
              <el-button link type="primary" @click="handlePreview(row)">预览</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getOutgoingInvoiceById, deleteOutgoingInvoice } from '@/api/invoice'

// 路由
const route = useRoute()
const router = useRouter()

// 发票数据
const invoiceData = ref({
  id: '',
  invoiceNumber: '',
  invoiceCode: '',
  invoiceTypeCode: '',
  isRedInvoice: 'N',
  invoiceDate: '',
  customerId: '',
  sellerTaxNumber: '',
  sellerName: '',
  buyerTaxNumber: '',
  buyerName: '',
  totalAmount: 0,
  taxAmount: 0,
  totalTaxAmount: 0,
  issuer: '',
  taxBureauCode: '',
  taxBureauName: '',
  remark: '',
  status: 'normal',
  invoiceSource: '',
  createdAt: '',
  updatedAt: ''
})

// 附件列表
const attachments = ref([
  {
    id: 1,
    name: '发票扫描件.pdf',
    size: '2.3MB',
    uploadTime: '2025-11-20 10:30:00'
  },
  {
    id: 2,
    name: '合同附件.docx',
    size: '1.1MB',
    uploadTime: '2025-11-20 10:35:00'
  }
])

// 获取发票类型文本
const getInvoiceTypeText = (typeCode: string) => {
  switch (typeCode) {
    case 'special': return '增值税专用发票'
    case 'normal': return '增值税普通发票'
    case 'electronic': return '电子发票'
    default: return '未知类型'
  }
}

// 获取状态类型
const getStatusType = (status: string) => {
  switch (status) {
    case 'normal': return 'success'
    case 'void': return 'danger'
    case 'draft': return 'warning'
    default: return 'info'
  }
}

// 获取状态文本
const getStatusText = (status: string) => {
  switch (status) {
    case 'normal': return '正常'
    case 'void': return '已作废'
    case 'draft': return '草稿'
    default: return '未知'
  }
}

// 格式化金额
const formatAmount = (amount: number) => {
  return amount ? amount.toFixed(2) : '0.00'
}

// 返回
const handleBack = () => {
  router.back()
}

// 编辑
const handleEdit = () => {
  router.push(`/finance/invoices/outgoing/edit/${invoiceData.value.id}`)
}

// 删除
const handleDelete = () => {
  ElMessageBox.confirm(
    `确定要删除发票号码为 ${invoiceData.value.invoiceNumber} 的销项发票吗？`,
    '删除确认',
    {
      type: 'warning'
    }
  ).then(async () => {
    try {
      await deleteOutgoingInvoice(invoiceData.value.id)
      ElMessage.success('删除成功')
      router.back()
    } catch (error: any) {
      ElMessage.error('删除失败: ' + (error.message || '未知错误'))
    }
  }).catch(() => {
    // 取消删除
  })
}

// 下载附件
const handleDownload = (row: any) => {
  ElMessage.info(`下载 ${row.name}`)
}

// 预览附件
const handlePreview = (row: any) => {
  ElMessage.info(`预览 ${row.name}`)
}

// 组件挂载时获取数据
onMounted(async () => {
  const id = route.params.id
  if (id) {
    try {
      const data = await getOutgoingInvoiceById(id)
      invoiceData.value = data
    } catch (error: any) {
      ElMessage.error('获取发票详情失败: ' + (error.message || '未知错误'))
    }
  }
})
</script>

<style scoped>
.invoice-detail-container {
  padding: 20px;
}

.detail-card {
  min-height: calc(100vh - 120px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.attachments-card {
  margin-top: 20px;
}
</style>